<template>
    <div>
        <el-col>

        <label for="">楼层：</label><el-input></el-input>
        </el-col>
        <canvas id="canvas" width="600" height="400"></canvas>
        <el-button type="primary" size="mini" @click="addImg">添加</el-button>
        <el-button type="primary"  size="mini" @click="btnClick">新增自定义</el-button>
        <el-button type="primary"   size="mini" @click="canvasTOJSON">转JSON</el-button>
      
    </div>
</template>
<script>
import { fabric } from 'fabric';

export default {
    name: 'EditMap',
    created() {
        this.draw();
    },
    data() {
        return {
            styleData: {
                'width': 500,
                'height': 300,
                'left': 0,
                'top': 0,
                'scale': 0.1,
                'imgScale': 1
            },
            enable: false,
            showenable: false,
            // 视图拖动灵敏度
            sensitivity: 0.1,
            image: '',
            canvas: '',
            selectval: '',
            ctx: '',
            canvasJSON: '',
            dialogFormVisible: false,
            loadCanvas: '',
            mapWidth: 0,
            mapHeight: 0,
            form: {
                name: '',
                region: ''
            },
            id: 1 // 页面元素标记唯一id
        }
    },
    computed: {
        style() {
            return {
                'width': this.styleData.width + 'px',
                'height': this.styleData.height + 'px',
                'border': '2px solid red',
                'position': 'relative',
                'backaground': 'static/images/image/bgS.png',
                'left': this.styleData.left + 'px',
                'top': this.styleData.top + 'px',
                'z-index': 10,
                'wheelClientX': 0,
                'wheelClientY': 0
            }
        },
        imgStyle() {
            return {
                'position': 'relative',
                'left': -this.styleData.left + 'px',
                'top': -this.styleData.top + 'px',
                'transform': 'scale(' + this.styleData.imgScale + ')',
                'transform-origin': this.styleData.wheelClientX + 'px ' + this.styleData.wheelClientY + 'px'
            }
        }
    },
    methods: {
        
        // 绘制地图
        draw() {
            let that = this;
            // 获取地图图片宽高
            fabric.Image.fromURL('static/images/image/bgS.png', function(img) {
                // 定义canvas
                that.mapWidth = img.width;
                that.mapHeight = img.height;
                that.canvas = new fabric.Canvas('canvas', {
                    width: that.mapWidth,
                    height: that.mapHeight
                });
                // 地图设为canvas背景图
                that.canvas.setBackgroundImage('static/images/image/bgS.png', that.canvas.renderAll.bind(that.canvas))
                // 背景地图id为0
                that.canvas.set({ id: 0 })
            });
        },
        // 添加坐席
        addImg() {
            let that = this;
            // 坐席底色
            let rect = new fabric.Rect({
                width: 70,
                height: 70,
                fill: '#1296db'
            });
            fabric.Image.fromURL('static/images/icons/icon/staff.png', function(img) {
                console.log(that.canvas, 'before')
                img.set({ id: that.id++ });
                console.log(img, 'img')
                // let group = new fabric.Group([rect,img],{
                //     selectable: true
                // });                
                that.canvas.add(img);
                that.canvas.renderAll();
                console.log(that.canvas, 'after')
            });
        },
        //初始化Group图标方法
        btnClick() {
            let that = this;
            fabric.Image.fromURL('static/images/icons/icon/staff.png', function(img) {
                var img1 = img.scale(0.1).set({ left: 5 });
                fabric.Image.fromURL('static/images/icons/icon/logout.png', function(img) {
                    var img2 = img.scale(0.6).set({ left: 25 });
                    var rect = new fabric.Rect({
                        fill: 'green',
                        width: 50,
                        height: 50,
                        rx: 10,
                        ry: 10,
                    });
                    var num = new fabric.Text('A10423', {//绘制文本
                        fontSize: 5,
                        originX: 'center',
                        originY: 'center',
                        top: 30,
                        left: 15
                    })
                    var name = new fabric.Text('高圆圆', {//绘制文本
                        fontSize: 5,
                        originX: 'center',
                        originY: 'center',
                        top: 42,
                        left: 15
                    })
                    var group = new fabric.Group([rect, num, name, img1, img2],
                        { lockScalingX: true, lockScalingY: true });
                    group.set({ id: that.id++ });
                    that.canvas.add(group);
                    console.log(group);
                    console.log(that.canvas, 'after');
                });
            });
        },
        // canvas转JSON
        canvasTOJSON() {
            this.canvasJSON = this.canvas.toJSON(['id']);
            console.log(this.canvasJSON);
            console.log(this.canvasJSON.objects);
            this.enable = true;
        },
      
     
}
}

</script>
<style scoped>

</style>